<template>
  <div>
    <ul>
      <li v-if="data.parent">
        <a-divider>{{ $t('memberList.sj') }}</a-divider>
        <a-card :loading="loading" style="margin-bottom: 3rem;cursor: pointer;">
          <div @click="handleClickMember(data.parent)">
            {{data.parent.username}}
          </div>
        </a-card>
      </li>
      <li>
        <a-divider>{{ $t('memberList.zhxx') }}</a-divider>
        <a-card :loading="loading" style="margin-bottom: 3rem">
          <dl>
            <dt>{{data.row.username}} {{ $t('memberList.ye') }}: <span style="color:red;font-weight: bold;">{{data.row.balance}}</span></dt>
            <dd>$t('memberList.dqjb'): {{data.row.is_vip? data.row.vip.name : $t('memberList.pthy')}}</dd>
            <dd>{{ $t('memberList.zcsj') }}: {{data.row.created_at}}</dd>
            <dd>{{ $t('memberList.zhdlsj') }}: {{data.row.updated_at}}</dd>
            <dd>{{ $t('memberList.zhrwsj') }}: {{data.task_info.created_at}}</dd>
            <dd>{{ $t('memberList.czze') }}: <b>{{data.recharge}}</b></dd>
            <dd>{{ $t('memberList.txze') }}: <b>{{data.withdraw}}</b></dd>
            <DD>{{ $t('memberList.srze') }}: <b>{{data.income}}</b></DD>
          </dl>
        </a-card>
      </li>
      <li>
        <a-divider>{{ $t('memberList.zrs') }}: {{data.total}}</a-divider>
        <a-card :loading="loading" style="margin-bottom: 3rem">
          <ul>
            <li v-bind:key="key" v-for="(item, key) in data.sub">
              {{key+1}}{{ $t('memberList.jdl') }} ({{item.length}})
            </li>
          </ul>
        </a-card>
      </li>
<!--      <li v-bind:key="key" v-for="(item, key) in data.sub">-->
<!--        <a-divider>{{key+1}}{{ $t('memberList.jdl') }} ({{item.length}})</a-divider>-->
<!--        <a-card :loading="loading" style="margin-bottom: 3rem">-->
<!--          <ol>-->
<!--            <li @click="handleClickMember(subitem)" v-bind:key="subitem.id" v-for="subitem in item">-->
<!--              <dl>-->
<!--                <dt>{{subitem.username}}</dt>-->
<!--                <dd>{{ $t('memberList.hyc') }}: {{subitem.nickname}}</dd>-->
<!--                <dd>{{ $t('memberList.zsxm') }}: {{subitem.realname}}</dd>-->
<!--                <dd>{{ $t('memberList.kyye') }}: {{subitem.balance}}</dd>-->
<!--                <dd>{{ $t('memberList.hydj') }}:-->
<!--                  <span v-if="subitem.vip" style="color:blue;font-weight: bold;">{{subitem.vip.name}}</span>-->
<!--                  <span v-else>{{ $t('memberList.pthy') }}</span>-->
<!--                </dd>-->
<!--                <dd>{{ $t('memberList.zcsj') }}: {{subitem.created_at}}</dd>-->
<!--              </dl>-->
<!--            </li>-->
<!--          </ol>-->
<!--        </a-card>-->
<!--      </li>-->
    </ul>
  </div>
</template>

<script>
import { mixin, mixinDevice } from '@/utils/mixin'

export default {
  name: 'AdvancedForm',
  mixins: [mixin, mixinDevice],
  components: {
  },
  data () {
    return {
      description: this.$t('memberList.zswzdzcyhxx'),
      loading: false,
      data: [],
      username: ''
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    handleClickMember (item) {
      this.username = item.username
      this.getList()
    },
    getList () {
      this.memberLoading = true
      let url = '/get_sub_list'
      if (this.username) {
        url += '?username=' + this.username
      }
      this.loading = true
      this.$http.get(url).then(res => {
        this.data = res
        console.log(res)
        console.log(this.data.sub)
      }).catch(err => {
        this.$notification.error({
          message: this.$t('memberList.sb'),
          description: err.message
        })
      }).then(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
  ul li ul li{
    float: left;
    border: thin dashed #ccc;
    padding: 5px 10px;
    border-radius: 3px;
    margin: 5px;
  }
  ul li ol{
    list-style: none;
    padding:0;
  }
  ul li ol li {
    float: left;
    border: thin solid #ccc;
    padding: 5px 10px;
    margin: 5px;
    border-radius: 3px;
    cursor: pointer;
  }
</style>
